<template>
  <div class="user-table-container">
    <el-table :data="userData.records" style="width: 100%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="realName" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="page.currentPage"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { userPageByOrg } from '@/api/organizational/organizationalManagement';

export default {
  name: 'UserTableWithPagination',
  props: {
    orgId: {
      type: String,
      required: true,
      default: () => {
        return '';
      },
    },
  },
  data() {
    return {
      userData: {
        records: [],
        total: 0,
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
    };
  },
  watch: {
    orgId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.loadUserData();
        }
      },
    },
  },
  methods: {
    loadUserData() {
      this.userData = [];
      userPageByOrg(this.page.currentPage, this.page.pageSize, { id: this.orgId }).then(res => {
        this.userData = res.data.data;
        this.page.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.loadUserData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.loadUserData();
    },
  },
};
</script>

<style scoped lang="scss">
.user-table-container {
  .pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
